<template>
  <div>
    <PublicPage class="detail" page-name="明细" :borderType="true" :showNav="true">
      <div class="detail_content">
        <div class="detail_screen">
          <div class="screen_left">
            <div class="screen_time screen_time_two" @click.stop="screenTime">{{currentYears}}年{{currentMonth}}月<img mode="aspectFill" src="https://image.qqpyyds.com/mpAppImg/icon/jiantou8_icon.png" /></div>
            <!-- <div class="screen_money">收入 ￥{{monthStatistical.monthTotalOutBalance | rounding}}, 支出 ￥{{monthStatistical.monthTotalInBalance | rounding}}</div> -->
          </div>
          <div class="screen_text" @click.stop="screenFn">筛选</div>
        </div>
        <scroll-view class="layout_con_box" v-if="moneyLogList.length>0" scroll-y="true" @scrolltolower="scrolltolowerFn" -webkit-overflow-scrolling="touch" scroll-with-animation="true">
          <div v-for="(item, index) in moneyLogList" :key="index">
            <div class="monthTime_box" v-if="index>0&&monthComparisonFn(moneyLogList[index-1].createTime,item.createTime)">{{monthComparisonFn(moneyLogList[index-1].createTime,item.createTime)}}</div>
            <div class="detail_screen screen_detail">
              <div class="screen_left">
                <div class="line_clamp screen_time">{{item.title}}<span v-if="item.remark">—{{item.remark}}</span></div>
                <div class="screen_money">{{item.createTime}}</div>
              </div>
              <div class="screen_text" :class="`${item.changeMoney}` > 0 ? 'income': ''"><span v-if="item.changeMoney > 0">+</span>{{item.changeMoney}}</div>
            </div>
          </div>
          <div class="notData_box" v-if="notDataType">沒有更多数据了~</div>
        </scroll-view>
        <view class="noData_box" v-if="!moneyLogList || moneyLogList.length < 1">
          <view class="flex-col items-center order-default">
            <image
              src="https://image.qqpyyds.com/mpAppImg/noneImg/search_default_img.png"
              class="order-default-image"
              mode="aspectFill"
            />
            <text class="order-default-text">暂无明细~</text>
          </view>
        </view>
      </div>
      <!-- 筛选时间 -->
      <u-picker mode="time" confirm-color="#e44435" confirm-text="确定" :end-year="currentYears" v-model="showTime" :defaultTime="defaultTime" @confirm="timeConfirm" :params="params"></u-picker>
      <u-popup v-model="screenShow" :round="true" mode="bottom" borderRadius="12" @close="closeScreenFn">
        <div class="public_msg_box">
          <div class="public_titName_box">筛选要查看的流水类型</div>
          <scroll-view class="scroll_box" scroll-y="true" -webkit-overflow-scrolling="touch" scroll-with-animation="true">
            <ul class="screen_ul_box">
              <li class="screen_li_box" v-for="(change, index) in changeTypeList" :key="index" @click.stop="selectChangeFn(change)">
                <div class="screen_li_l">{{change.title}}</div>
                <div class="screen_li_r">
                  <img class="img_box" v-if="changeTitle.includes(change.title)" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/success2_icon.png" alt="">
                  <img class="img_box" v-else src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/yuanxing1_icon.png" alt="">
                </div>
              </li>
            </ul>
          </scroll-view>
          <div class="iKnow_btn_box">
            <button class="iKnow_btn" hover-class='hover' @click.stop="screenSubmitFn">筛选</button>
          </div>
        </div>
      </u-popup>
    </PublicPage>
  </div>
</template>
<script>
import PublicPage from "@/components/publicPage/index.vue";
import Money from '@/api/money.js'
import Util from "@/api/util.js";
export default {
  name: 'detail',
  components: {PublicPage},
  data() {
    return {
      isIOS: uni.getSystemInfoSync().system.indexOf("Android") !== 0,
      showTime: false,
      // 用于获取当前年份
      currentYears: '',
      currentMonth: '',
      monthStatistical: {
        monthTotalInBalance: 0,
        monthTotalOutBalance: 0
      },
      // 需要显示的参数
      params: {
				year: true,
				month: true,
				day: false,
				hour: false,
				minute: false,
				second: false
			},
      // 明细列表
      moneyLogList: [],
      pageSize: 20,
      notDataType: false,
      currentPage: 1,
      changeTitle: [],
      screenShow: false,
      changeTypeList: [],
      lastTimechangeTitle: [],
      defaultTime: '',
    }
  },
  onLoad () {
    this.currentYears = new Date().getFullYear()
    this.currentMonth = new Date().getMonth() + 1
    this.defaultTime = this.currentYears + '-' + this.currentMonth + '-01' + ' 00:00:00'
    this.getMoneyLogList()
  },
  onReady () {
    
  },
  methods: {
    screenSubmitFn () {
      this.currentPage = 1
      this.moneyLogList = []
      this.screenShow = false
      this.getMoneyLogList()
    },
    selectChangeFn (item) {
      this.changeTitle = Util.selectArr(item.title, this.changeTitle)
      this.$forceUpdate()
    },
    closeScreenFn () {
      this.screenShow = false
      this.changeTitle = JSON.parse(JSON.stringify(this.lastTimechangeTitle))
    },
    async screenFn () {
      console.log(this.changeTitle,'this.changeTitlethis.changeTitle')
      Money.getChangeType({}).then(res => {
        if (res.code == 200) {
          this.changeTypeList = res.data
          this.screenShow = true
        }
      })
    },
    monthComparisonFn (t1,t2) {
      return Util.monthComparison(t1,t2)
    },
    // 获取明细
    async getMoneyLogList () {
      let params = {
        date: this.currentYears + '-' + this.currentMonth + '-00' + ' 00:00:00',
      }
      let paramsLog = {
        currentPage: this.currentPage,
        date: this.currentYears + '-' + this.currentMonth + '-01' + ' 00:00:00',
        pageSize: this.pageSize,
      }
      if (this.changeTitle.length>0) {
        paramsLog = {
          ...paramsLog,
          titleList: this.changeTitle,
        }
        this.lastTimechangeTitle = JSON.parse(JSON.stringify(this.changeTitle))
      } else {
        this.lastTimechangeTitle = []
      }
      // Money.getMoneyStatistics(params).then(res => {
      //   if (res.code === 200) {
      //     if (res.data !== '')
      //     this.monthStatistical = res.data
      //   }
      // })
      Money.getMoneyLogList(paramsLog).then(res => {
        if (res.code === 200) {
          if (this.moneyLogList.length>0) {
            this.moneyLogList = this.moneyLogList.concat(res.data.records)
          } else {
            this.moneyLogList = res.data.records
          }
          if (res.data.records.length<this.pageSize) {
            this.notDataType = true
          } else {
            this.notDataType = false
          }
        }
      })
    },
    scrolltolowerFn () {
      if (this.notDataType) return
      ++this.currentPage
      this.getMoneyLogList()
    },
    // 点击弹起选择筛选时间
    screenTime () {
      this.defaultTime = this.currentYears + '-' + this.currentMonth + '-01' + ' 00:00:00'
      this.showTime = true
    },
    // 筛选时间确定事件
    timeConfirm (e) {
      console.log(e, '筛选时间确定事件');
      this.currentYears = e.year
      this.currentMonth = e.month
      this.currentPage = 1
      this.moneyLogList = []
      this.getMoneyLogList()
    }
  },
  filters: {
    // 只显示到两位小数点
    rounding (value) {
      return value>0?value.toFixed(2):0.00
    },
  }
}
</script>
<style lang="scss" scoped>
.detail {
  height: 100vh;
  background: #f5f5f5;
}
.detail_content {
  height: 100%;
  .detail_screen {
    // height: 156rpx;
    display: flex;
    justify-content: space-between;
    padding: 32rpx;
    font-size: 32rpx;
    color: #323233;
    .screen_text {
      font-size: 28rpx;
      color: #969799;
    }
  }
  .screen_detail {
    padding: 0 32rpx 0;
    height: 140rpx;
    background: #fff;
    align-items: center;
    .screen_money {
      color: #969799;
      font-size: 24rpx;
    }
    .screen_text {
      font-size: 32rpx;
      font-weight: 500;
      color: #323233;
      &.income {
        color: #e44435;
      }
    }
  }
  .layout_con_box {
    height: calc(100% - 104rpx);
  }
}
.monthTime_box {
  padding: 32rpx;
  font-size: 32rpx;
  font-weight: bolder;
  line-height: 44rpx;
  color: #323233;
}
.screen_left {
  .screen_time {
    width: 496rpx;
    height: 40rpx;
    line-height: 40rpx;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    &.screen_time_two {
      font-weight: bolder;
    }
  }
  img {
    margin-left: 8rpx;
    width: 24rpx;
    height: 24rpx;
  }
  .screen_money {
    margin-top: 16rpx;
    font-size: 22rpx;
    color: #969799;
  }
}
.noData_box {
  width: 100%;
  height: calc(100vh - 138px);
}
.public_msg_box {
  .public_titName_box {
    font-size: 32rpx;
    color: #323233;
    padding: 48rpx 0;
    text-align: center;
  }
  .scroll_box {
    width: 100%;
    height: 40vh;
  }
  .screen_ul_box {
    padding: 0 32rpx;
    .screen_li_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 32rpx;
      border-bottom: 2rpx solid #EBEDF0;
      .screen_li_l {
        color: #323233;
        font-size: 28rpx;
        line-height: 40rpx;
      }
      .screen_li_r {
        .img_box {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
  }
  .iKnow_btn_box {
    padding: 20rpx 32rpx;
    padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
	  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    .iKnow_btn {
      width: 100%;
      height: 88rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #e44435;
      border-radius: 36rpx;
      font-size: 28rpx;
      color: #fff;
    }
  }
}
</style>
